﻿<div class="blade" ng-class="[moduleName, {'__animated': blade.animated, '__expanded': blade.isExpanded, '__maximized': blade.isMaximized, '__closing': blade.closing}]" ng-repeat="blade in blades">
    <div class="blade-wrapper" va-blade='blade'>
        <header class="blade-head">
            <div class="blade-status" ng-class="{'__error': blade.error}">
                <div class="status-message" ng-if="blade.error"><div class="error-message">{{blade.error}}</div>
                <div class="see-details"><a class="link-error-details" ng-click="showErrorDetails()">{{ 'platform.commands.see-details' | translate }}</a></div>
                </div>
                <div class="progress-bar" ng-class="{'__loaded': !blade.isLoading}" ng-show="blade.isLoading"></div>
            </div>
            <div class="blade-nav">
                <ul class="menu __inline">
                    <li class="menu-item __minimize" ng-click="bladeMinimize()" ng-show="!blade.isExpandable && blade.isMaximized">
                        <button>
                            {{ 'platform.commands.restore' | translate }}
                        </button>
                    </li>
                    <li class="menu-item __maximize" ng-click="bladeMaximize()" ng-show="!blade.isExpandable && !blade.isMaximized">
                        <button>
                            {{ 'platform.commands.maximize' | translate }}
                        </button>
                    </li>
                    <li class="menu-item __close" ng-click="bladeClose()" ng-class="{'__disabled': blade.isClosingDisabled}" ng-disabled="blade.isClosingDisabled">
                        <button>
                            {{ 'platform.commands.close' | translate }}
                        </button>
                    </li>
                </ul>
            </div>
            <div class="blade-t" ng-class="{'__secondary': blade.subtitle}">
                <i class="blade-t_ico fa" ng-class="blade.headIcon ? blade.headIcon : 'fa-folder'">
                    <i></i>
                </i>
                <p class="blade-t_head">{{ blade.title | translate: blade.titleValues }}</p>
                <p class="blade-t_subhead">{{ blade.subtitle | translate: blade.subtitleValues }}</p>
            </div>
            <div class="blade-toolbar">
                <ul class="menu __inline">
                    <li class="menu-item" ng-class="{'__disabled': !toolbarCommand.canExecuteMethod(blade)}" ng-click='toolbarCommand.executeMethod(blade)' ng-repeat="toolbarCommand in resolvedToolbarCommands | limitTo:toolsPerLineCount" ng-disabled="!toolbarCommand.canExecuteMethod(blade)" va-permission="{{toolbarCommand.permission}}" security-scopes="blade.securityScopes">
                        <button class="menu-btn">
                            <i class="menu-ico" ng-class="toolbarCommand.icon"></i>
                            {{ toolbarCommand.name | translate }}
                        </button>
                    </li>
                    <li class="menu-item __more" ng-click="showMoreTools($event)" ng-if="resolvedToolbarCommands.length > toolsPerLineCount">
                        <a class="menu-btn">
                            <i class="menu-ico fa fa-ellipsis-h"></i>
                            {{ 'platform.commands.more' | translate }}
                        </a>
                    </li>
                </ul>
            </div>
        </header>
        <div class="loader" ng-if="blade.isLoading">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="blade-container" ng-class="{'__loading': blade.isLoading}">
            <ng-include src='blade.template'></ng-include>
        </div>
    </div>
</div>
